<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            /* width: 200px;
            height: 200px; */
            padding: 15px;
        }
        #one{
            background-color: gray;            
        }
        #two{
            background-color: brown;
        }
    </style>
</head>

<body>
     <div id="one">
         <div id="two">
             <button id="three" onclick1="click1();">click</button>
         </div>
     </div>
     <button id="buy" onclick="buy();">buy</button>
     <script>  
        function buy(){
            var btn = document.getElementById("buy")
            var event = new CustomEvent("my_buy",{
                detail:{
                    name:"caoyx",
                    age:44
                }
            })
            // var event = document.createEvent("CustomEvent");
            // event.initCustomEvent('my_buy',true,true,{name:"caoyx",age:33});
            
            btn.dispatchEvent(event);
            console.log("buy")
        }
        window.onload = function(){
            console.log('afasdfasdfads')
            function watcher(id,useCapture=false){
                var el = document.getElementById(id);
                el.addEventListener('click',function(e){
                    const mark = useCapture? '[捕获阶段]':'[冒泡阶段]';
                    console.log(this.getAttribute("id")+mark+" 被点击了");
                    console.log('eventPhase',e.eventPhase);
                    console.log(e.clientX,e.clientY)
                    console.log(e.pageX,e.pageY)
                    console.log(e.detail);
                    // 加上下面代码,会终止two three 的事件捕获
                    // if (this.id == "one"){
                    //     e.stopPropagation();
                    // }
                    // console.log('target',e.target);
                    // console.log('currentTarget',e.currentTarget);
                },useCapture)
             }
             watcher("one",true);
             watcher("two",false);
             watcher("three",true);

             var el = document.getElementById("two");
             el.addEventListener('contextmenu',(e)=>{
                 e.preventDefault();
             });
             var btn = document.getElementById("buy")
             btn.addEventListener('my_buy',function(e){
                 console.log('my_buy',e);
             });
         }
     </script>
</body>

</html>

